<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>职级管理</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="../css/tfy/职级管理.css" />
</head>

<body>
  <div style="width: 100%">
    <nav class="nav-ct">
      <div class="nav-hd">
        <span class="iconfont icon-oabangong"></span>
        <span class="title">办公后台系统</span>
      </div>
      <div class="center">
        <ul class="nav-content">
          <li><a href="">工作台</a></li>
          <li><a href="">数据大屏</a></li>
          <li><a href="">员工</a></li>
          <li><a href="">组织</a></li>
          <li><a href="">招聘</a></li>
          <li><a href="">考勤</a></li>
          <li><a href="">薪酬</a></li>
          <li><a href="">社保公积金</a></li>
          <li><a href="">绩效</a></li>
          <li><a href="">培训</a></li>
          <li><a href="">审批</a></li>
          <li><a href="">权限设置</a></li>
        </ul>
      </div>
    </nav>
    <div class="ct-box">
      <div class="nav-ct-2">
        <ul class="nav-ct-menu">
          <li class="title">
            组织架构
            <ul>
              <li><a href="./组织管理.html">组织管理</a></li>
              <li><a href="">组织架构图</a></li>
              <li><a href="">工作职场</a></li>
            </ul>
          </li>
          <li class="title">
            职位体系
            <ul>
              <li><a href="./职位管理.html">职位管理</a></li>
              <li><a href="./职务管理.html">职务管理</a></li>
              <li><a href="./职级管理.html">职级管理</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="box">
        <!-- 内容填充,左侧导航栏根据此地方内容自适应。 -->
        <div class="organization">
          <div class="organization-box">
            <div class="box-title">
              <div>
                <span class="aa">职级管理</span>
              </div>
              <hr />
              <div class="management">
                <div style="display: flex; align-items: center">
                  <div class="bbb">
                    <span>职级名称：</span><input id="input1" type="text" />
                  </div>
                  <button class="search">搜索</button>
                </div>
              </div>
              <div class="filter">
                <span>筛选条件：</span><span>职务名称：初级</span>
              </div>
            </div>


          </div>
          <div class="box-body">
            <div>
              <button type="button" class="btn btn-primary" id="new">
                + 新增课程
              </button>
              <div
              class="modal fade"
              id="myModal2"
              tabindex="-1"
              role="dialog"
              aria-labelledby="myModalLabel"
              aria-hidden="true"
            >
              <div class="modal-dialog" style="    margin-top: 14%;">
                <div class="modal-content">
                  <div class="modal-header">
                    <button
                      type="button"
                      class="close"
                      data-dismiss="modal"
                      aria-hidden="true"
                    >
                      &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加</h4>
                  </div>
                  <div class="modal-body" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">  
                    <div>
                      <span>职级编码：</span>
                      <input type="text">
                    </div>
                    <div>
                      <span>职位名称：</span>
                      <input type="text">
                    </div>
                    <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职等：</span>
                      <input typ
                      e="text">
                    </div>
                    <div>
                      <span>职级描述：</span>
                      <input type="text">
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button
                      type="button"
                      class="btn btn-default"
                      data-dismiss="modal"
                    >
                      关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="new2">
                      确认添加
                    </button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal -->
            </div>
            </div>
            <table class="table">
              <thead>
                <tr>
                  <th></th>
                  <th>序列</th>
                  <th>职级编码</th>
                  <th>职级名称</th>
                  <th>职等</th>
                  <th>职级描述</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
            <!-- <div id="modifyModal">
                  <div class="modify-modal-box">
                    <div id="modifyModalContent">
                      <form>
                        <div class="popUp">
                          <div>职位管理</div>
                          <div class="row">
                            <label>序列：</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                              id="ManagementId"
                              type="text"
                            />
                          </div>
                          <div class="row">
                            <label>职位名称：</label
                            ><input id="ManagementJobTitle" type="text" />
                          </div>
                          <div class="row">
                            <label>职位编码：</label
                            ><input id="ManagementJobCoding" type="text" />
                          </div>
                          <div class="row">
                            <label>所属部门：</label>
                            <select
                              id="ManagementDepartmentAffiliation"
                              type="text"
                              style="width: 175px"
                            >
                              <option value="技术部">技术部</option>
                              <option value="开发部">开发部</option>
                            </select>
                          </div>
                          <div class="row">
                            <label>职位类别：</label>
                            <select
                              id="ManagementJobCategory"
                              type="text"
                              style="width: 175px"
                            >
                              <option value="研发类">研发类</option>
                              <option value="设计类">设计类</option>
                            </select>
                          </div>
                          <div class="row">
                            <label>描述：</label
                            ><input id="ManagementJobDescription" type="text" />
                          </div>
                        </div>
                      </form>
                      <!-- form 会导致 自动关闭 -->
            <!-- <div class="row">
                        <button id="cancelBtn">取消</button>
                        <span></span>
                        <button id="confirmBtn">提交</button>
                      </div> -->
            <!-- </div> -->
            <!-- </div>
                </div> -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                      &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">删除</h4>
                  </div>
                  <div class="modal-body" style="color: red">
                    确定删除此条信息
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                      关闭
                    </button>
                    <button id="a" type="button" class="btn btn-primary">
                      确认
                    </button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal -->
            </div>
            <div
                  class="modal fade"
                  id="myModal1"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="myModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" style="    margin-top: 14%;">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button
                          type="button"
                          class="close"
                          data-dismiss="modal"
                          aria-hidden="true"
                        >
                          &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">编辑</h4>
                      </div>
                      <div class="modal-body" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <div>
                          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序列：</span>
                          <input id="ManagementId" disabled type="text">
                        </div>
                        <div>
                          <span>职级编码：</span>
                          <input id="ManagementGradeCoding" type="text">
                        </div>
                        <div>
                          <span>职级名称：</span>
                          <input id="ManagementGradeName" type="text">
                        </div>
                        <div>
                          <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职等：</span>
                          <input id="ManagementGrade" type="text">
                        </div>
                        <div>
                          <span>职级描述：</span>
                          <input style="height: 80px;" id="ManagementGradeDescription" type="text">
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          关闭
                        </button>
                        <button  type="button" class="btn btn-primary">
                          确认修改
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="display: flex; justify-content: flex-end">
                  <div id="pre" href="#">&laquo;</div>
                  <ul class="pagination">
                    <!-- <li><a href="#">&laquo;</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li> -->                  
                  </ul>
                  <div id="next" href="#">&raquo;</div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="../js/tfy/职级管理.js"></script>
</body>

</html>